<template>
  <div class="ta-container">
    <el-input
      type="textarea"
      rows="6"
      placeholder="请输入内容"
      v-model="content"
      resize="none"
      show-word-limit
    >
    </el-input>
    <div class="ta-op">
      <el-button
        type="primary"
        round
        @click="submitComment"
        :disabled="content == ''"
        :loading="loading"
        >发布</el-button
      >
      <el-button round @click="content = ''">取消</el-button>
    </div>
  </div>
</template>

<script>
import commentApi from "@/axios/commentApi";
export default {
  props: ["comment"],
  data() {
    return {
      content: "",
      loading:false
    };
  },
  methods: {
    submitComment() {
      this.loading=true
      this.content = this.content.trim();
      if (/^\s*$/.test(this.content))
        return this.$message.error("内容不能为空");
      commentApi
        .save({ ...this.comment, content: this.content.trim() })
        .then(({ data }) => {
          if (data.code == this.$status.SUCCESS_CODE) {
            this.$message.success("评论成功");
            this.content = "";
            this.loading=false;
            this.changeCommentInput(0)
            this.$emit("onNewComment", data.data);
          }
        });
    },
  },
};
</script>

<style scoped lang="less">
.ta-container {
  width: 100%;
  .ta-op {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
    & > .el-button {
      margin-right: 5px;
    }
  }
}
</style>